<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=640, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>2022年Web兴趣小组招新</title>
<link href="./css/frame.css" rel="stylesheet" />
<link href="./css/index1.css" rel="stylesheet" />
<link href="./css/index2.css" rel="stylesheet" />
<link href="./css/index3.css" rel="stylesheet" />
<link href="./css/index4.css" rel="stylesheet" />
<link href="./css/index5.css" rel="stylesheet" />
<link href="./css/index6.css" rel="stylesheet" />
</head>
 
<body>
 
<div class="page_box">
    <div class="page page1">
        <div class="page1-body">
            <img class="page1-body-img" src="./img/zhaoxin.jpg">
            <div class="page1-body-content">
                <div>
                    <span>指导老师：</span>
                    <span>徐贵冰书记（讲师、硕士、前端设计师）</span>
                    <span>关南宝老师（讲师、硕士、前端设计师）</span>
                </div>
                <img src="./img/qqqun.png"  width="200px" height="200px"/>
            </div>
        </div>
    </div>
    
    <div class="page page2 hide">
        <div class="page2-body">
            <div class="p2-title">
                <img class="p2-title-img" src="./img/dengpao.svg" />
                <span class="p2-title-content">学习理念</span>
            </div>
            <div class="p2-content">
                <div class="p2-msg1">
                    <span>自主</span>
                    <span>
                        明确自己的学习目标，主动掌握基础知识
                    </span>
                </div>
                <div class="p2-msg2">
                    <span>创新</span>
                    <span>
                        用于提出新思路，新问题
                    </span>
                </div>
                <div class="p2-msg3">
                    <span>全面</span>
                    <span>
                        多方面学习，拓展知识面，全面发展
                    </span>
                </div>
                <div class="p2-msg4">
                    <span>坚持</span>
                    <span>
                        认真的人改变自己，坚持的人改变命运
                    </span>
                </div>
                <div class="p2-msg5">
                    <span>实践</span>
                    <span>
                        学习离不开实践，向实践学习、向生活学习
                    </span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="page page3 hide">
        <div class="page3-body">
            <div class="p3-circle">
                <div class="p3-wcircle">
                    <span>各种比赛</span>
                    <span>学习到一定程度，会有老师指导参加省级或国家级比赛，时刻检验学习成果</span>
                </div>
                <div class="p3-wcircle">
                    <span>免费学习</span>
                    <span>组内学习资料免费，主要为视频教学，除了一些比赛报名费用，不收取其他任何费用</span>
                </div>
                <div class="p3-wcircle">
                    <span>专业指导老师</span>
                    <span>组内有专业性强的老师进行学习指导，不定期授课</span>
                </div>
                <div class="p3-wcircle">
                    <span>学长指导</span>
                    <span>学长亲自指导学习方法，学习反向，基础知识答疑，专业技能等</span>
                </div>
                <div class="p3-ncircle">
                    <span>小组优势</span>
                </div>
            </div>
            <div class="p3-pic">
                <img  src="./img/p1.png" width="450px" height="230px">
                <img  src="./img/p2.png" width="450px" height="150px">
                <img  src="./img/p3.png" width="450px" height="230px">
            </div>
            
        </div>
    </div>
    
    <div class="page page4 hide">
        <div class="page4-body">
            <div class="p2-title">
                <img class="p2-title-img" src="./img/dengpao.svg" />
                <span class="p2-title-content">主要学习方向</span>
            </div>
            <div class="p4-content">
                <div class="p4-card">
                    <div class="p4-card-title">
                        <span>UI</span>
                    </div>
                    <div class="p4-card-content">
                        <span>
                            平面：通过PS等软件设计图片和文字；<br>
                            UI：设计软件样式排版和交互；<br>
                            网页美工：设计优化网站页面的观感。
                        </span>
                    </div>
                </div>
                <div class="p4-card">
                    <div class="p4-card-title">
                        <span>前端</span>
                    </div>
                    <div class="p4-card-content">
                        <span>
                            小程序：微信小程序为主，用户量庞大；<br>
                            移动端h5：开发适配手机端的web应用；<br>
                            vue框架：这是一个高效的前端开发框架，可以实现web应用的快速开发
                        </span>
                    </div>
                </div>
                <div class="p4-card">
                    <div class="p4-card-title">
                        <span>数据分析</span>
                    </div>
                    <div class="p4-card-content">
                        <span>
                            爬虫：合法合理的爬取网络上的资源<br>
                            数据清洗：对杂乱的数据就行筛选排序，以获取到自己想要的数据
                        </span>
                    </div>
                </div>
                <div class="p4-card">
                    <div class="p4-card-title">
                        <div class="p4-card-title">
                         <span>后端</span>
                        </div>
                    </div>
                    <div class="p4-card-content">
                        <span>
                            数据库：使用SQL语句操作软件数据；<br>
                            javaee：实现应用业务逻辑提供数据服务；<br>
                            后端框架：高效的后端开发框架，可以实现后端服务的快速开发
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="page page5 hide">
        <div class="page5-body">
            <div class="p2-title">
                <img class="p2-title-img" src="./img/dengpao.svg" />
                <span class="p2-title-content">部分奖项展示</span>
            </div>
            <div class="p5-content">
                <div class="p5-card">
                    <img class="p5-card-img" src="./img/p5/1.jpg">
                    <div class="p5-card-span">
                        <span>
                            网页制作竞赛三等奖<br/><br/>
                            百科知识竞赛<br/><br/>
                            江西省大学生计算机作品赛三等奖（省级）
                        </span>
                    </div>
                </div>
                <div class="p5-card">
                    <div class="p5-card-span">
                        <span>
                            江西省大学生科技创新与职业技能竞赛三等奖（省级）
                        </span>
                    </div>
                    <img class="p5-card-img" src="./img/p5/2.jpg">
                </div>
                <div class="p5-card">
                    <img class="p5-card-img" src="./img/p5/3.jpg">
                    <div class="p5-card-span">
                        <span>
                            江西省大学生计算机作品赛三等奖（省级）
                        </span>
                    </div>
                </div>
                <div class="p5-card">
                    <div class="p5-card-span">
                        <span>
                            江西省大学生科技创新与职业技能竞赛二等奖（省级）
                        </span>
                    </div>
                    <img class="p5-card-img" src="./img/p5/4.jpg">
                </div>
            </div>
            
        </div>
    </div>
    
    <div class="page page6 hide">
        <div class="page6-body">
            <div class="p2-title">
                <img class="p2-title-img" src="./img/dengpao.svg" />
                <span class="p2-title-content">部分风采</span>
            </div>
            <div class="p6-content">
                <img class="p6-content-img" src="./img/p6/1.jpg">
                <img class="p6-content-img" src="./img/p6/2.jpg">
                <img class="p6-content-img" src="./img/p6/3.jpg">
                <img class="p6-content-img" src="./img/p6/4.jpg">
                <img class="p6-content-img" src="./img/p6/5.jpg">
                <img class="p6-content-img" src="./img/p6/6.jpg">
                <img class="p6-content-img" src="./img/p6/7.jpg">
                <img class="p6-content-img" src="./img/p6/8.jpg">
                <img class="p6-content-img" src="./img/p6/9.jpg">
                <img class="p6-content-img" src="./img/p6/10.jpg">
            </div>
        </div>
    </div>
	
	<div class="arrow">
		<div>
			<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2859"><path d="M491.42 412.298c7.887 12.378 6.427 28.995-4.381 39.803L204.196 734.944l-90.51-90.51c-12.496-12.497-12.496-32.758 0-45.255L396.53 316.337l0.265 0.265 89.974-89.975c12.497-12.496 32.758-12.496 45.255 0l395.98 395.98-90.51 90.51c-12.497 12.497-32.758 12.497-45.255 0L491.42 412.297z" p-id="2860"></path></svg>
		</div>
		<div>
			<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2859"><path d="M491.42 412.298c7.887 12.378 6.427 28.995-4.381 39.803L204.196 734.944l-90.51-90.51c-12.496-12.497-12.496-32.758 0-45.255L396.53 316.337l0.265 0.265 89.974-89.975c12.497-12.496 32.758-12.496 45.255 0l395.98 395.98-90.51 90.51c-12.497 12.497-32.758 12.497-45.255 0L491.42 412.297z" p-id="2860"></path></svg>
		</div>
	</div>
</div>
 
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
 
var curPage = 1;
var PageL = $('.page_box .page').length;
var canTouch = false;
canTouch = true;
 
var startY , endY , diff;
//document.body.addEventListener("touchstart", touchStart, false);
//document.body.addEventListener("touchmove", touchMove, false);
//document.body.addEventListener("touchend", touchEnd, false);
$('.page_box').on('touchstart',touchStart);
$('.page_box').on('touchmove',touchMove);
$('.page_box').on('touchend',touchEnd);
function touchStart(e){
//	var touch = e.touches[0];
	var touch = e.originalEvent.targetTouches[0];
	startY = touch.pageY;
}  
function touchMove(e){
	e.preventDefault();
//	var touch = e.touches[0];
	var touch = e.originalEvent.targetTouches[0];
	endY = touch.pageY;
	diff = endY - startY;
}
function touchEnd(e){
	if(Math.abs(diff) > 150 && canTouch){
		if(diff > 0){
			if(curPage <= 1){
				return;
			}
			
			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outDown');
			curPage--;
			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inDown');
			
		}else{
			if(curPage >= PageL){
				return;
			}
			
			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outTop');
			curPage++;
			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inTop');
			
		}
		if(curPage >= PageL){
			$('.arrow').hide();
		}else{
			$('.arrow').show();
		}
		
		canTouch = false;
		setTimeout(function(){
			canTouch = true;
			diff = 0;
			$('.page' + (curPage - 1) + ', .page' + (curPage + 1)).addClass('hide');
		},500);
	}
}


// 点击图片放大功能
// 放大功能结束
</script>
</body>
</html>